<template>
    <el-form-item label="用户名">
        <div class="div-input"><el-input v-model="user.username" placeholder="username" /></div>
    </el-form-item>
    <el-form-item label="密码">
        <div class="div-input"><el-input v-model="user.password" placeholder="password" /></div>
    </el-form-item>
    <button ref="sendBtn" @click="login" style="height:30px;width: 80px">登录</button>
</template>

<script setup>
import {ref} from "vue";
import axios from "axios";
import qs from "qs";
import router from "@/router";
import { ElMessage } from 'element-plus';

const sendBtn = ref(null);
const user = ref({username:'',password:''})
const login = () => {
    let data = qs.stringify(user.value);
    // 禁用登录按钮或显示加载状态
    disabledButton();
    axios.post('http://124.71.182.39:27000/passport/login',data)
        .then((response)=>{
            if (response.data.state==20000){
                router.push('/');
                ElMessage.success('登录成功'); // 弹出成功提示信息
            }else {
                ElMessage.error(response.data.message); // 弹出错误提示信息
            }
        })
        .catch((error) => {
            console.error(error);
        })
        .finally(() => {
            // 恢复登录按钮状态
            enableButton();
        });
}

const disabledButton = () => {
    // 禁用登录按钮的逻辑
    sendBtn.value.setAttribute('disabled', 'disabled');
};

const enableButton = () => {
    // 恢复登录按钮的逻辑
    sendBtn.value.removeAttribute('disabled');
};
</script>

<style scoped>

</style>